<%@ page isELIgnored ="false" pageEncoding="UTF-8" %> 
<%@ taglib uri="http://java.sun.com/jstl/core" prefix="c" %>
<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>		
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Robots</title>
		<link rel="stylesheet" type="text/css" href="style.css" />
		
		<script language="javascript">
			var id;
			var ajaxRequest = createAjaxRequest();

			function createAjaxRequest() {
				if (typeof XMLHttpRequest != "undefined") {
					return new XMLHttpRequest();
				} 
				else if (window.ActiveXObject) {
					return new ActiveXObject("Microsoft.XMLHTTP");
				}
			}
		
			function filtrarTabla(textbox, callback, servlet) {
				var filtro = textbox.value;
				var url = servlet + "?filtro=" + filtro;
				
				ajaxRequest.open("GET", url, true);
				
				ajaxRequest.onreadystatechange = callback;
				ajaxRequest.send(null);
			}
			
			function updateRobotsPropios() {
				updateTabla("misRobots");
			}
			
			function updateRobotsDelSistema() {
				updateTabla("robotsDelSistema");
			}

			function updateTabla(divId) {
			    if (ajaxRequest.readyState == 4) {
			        if (ajaxRequest.status == 200) {
						document.getElementById(divId).innerHTML = ajaxRequest.responseText;
			        }
			        else {
			        	alert("No se pudo filtrar la tabla \n" + 
			        	      "Por un error: " + ajaxRequest.status + ajaxRequest.statusText);
			        }
			    }
			}		
		</script>
	</head>

	<body>
	
		<div align="center">
		<h2>${sessionScope.vistaPrincipal.nombre} $ ${sessionScope.vistaPrincipal.dinero}</h2>
		</div>
		
		<div align="center">	
			<table>
				<tr>					
					<th>
						<h3>filtrar tabla:</h3>			
					</th>	
					<th>
						<input type="text" value="${sessionScope.vistaPrincipal.misRobotsFiltro}" onkeyup="javascript:filtrarTabla(this, updateRobotsPropios,'filtrarMisRobotsServlet');"/>
					</th>					
				</tr>
			</table>							
		</div>
		
		<div align="center" id="misRobots">
		<p >Mis robots</p>			
		
			<table>
				<tr>					
					<th>Nombre</th>	
					<th>Poder total</th>
					<th>Nivel deterioro</th>
				</tr>
				<c:forEach items="${sessionScope.vistaPrincipal.misRobotsFiltrados}" var="robot" varStatus="status">
					<tr>					
						<td>${robot.nombre}</td>
						<td>${robot.poderTotal}</td>
				    	<td>${robot.danio}</td>				    	
				    	<td>
			   			<form method="post" action="vender">
							<input type="hidden" name="idRobot" value="${robot.id}" />
							<input type="submit" class=button value="vender"/>
						</form>
						</td>
				    </tr>
				</c:forEach>
			</table>
		</div>
		
		<div align="center">	
			<table>
				<tr>					
					<th>
						<h3>filtrar tabla:</h3>			
					</th>	
					<th>
						<input type="text" value="${sessionScope.vistaPrincipal.robotsDelSistemaFiltro}" onkeyup="javascript:filtrarTabla(this, updateRobotsDelSistema,'filtrarRobotsDelSistemaServlet');"/>
					</th>					
				</tr>
			</table>							
		</div>

			
			<div align="center" id="robotsDelSistema">
			<p>Robots del sistema</p>
			
					<table>
				<tr>
					<th>Nombre</th>					
					<th>Poder total</th>
					<th>Nivel deterioro</th>
				</tr>
				<c:forEach items="${sessionScope.vistaPrincipal.robotsDelSistemaFiltrados}" var="robot" varStatus="status">
					<tr>
						<td>${robot.nombre}</td>						
						<td>${robot.poderTotal}</td>
				    	<td>${robot.danio}</td>
				    	<td>
				    	<form method="post" action="comprar">
							<input type="hidden" name="robotId" value="${robot.id}" />
							<input type="submit" class=button value="comprar"/>
						</form>
				    	</td>
				    </tr>
				</c:forEach>
			</table>
			</div>
	</body>
</html>